<template>
  <div>
    <input type="radio" v-model="picked" value="sss" id="sss" />
    <label for="sss">shh</label>
    <input type="radio" v-model="picked" value="d" id="d" />
    <label for="d">shh</label>
    <el-button @click="show = !show">s</el-button>
    <transition name="el-zoom-in-top">
      
    </transition>
    <ul
      class="infinite-list"
      v-infinite-scroll="load"
      infinite-scroll-distance="8px"
      style="overflow: auto"
    >
      <li v-for="i in count" class="infinite-list-item" :key="i">{{ i }}</li>
    </ul>
  </div>
</template>

<script>
import SearchBar from "@/components/Frame/SearchBar/SearchBar.vue";
export default {
  components: { SearchBar },
  data() {
    return {
      count: 0,
      picked: "sss",
      show: true,
    };
  },
  methods: {
    load() {
      this.count += 2;
    },
  },
};
</script>

<style scoped>
input[type="radio"] {
  display: none;
}
label {
  display: inline-block;
  width: 100px;
  height: 60px;
}
input[type="radio"]:checked + label {
  background-color: aquamarine;
}
</style>
